<template>
    <div class="container">
        <h2>姓名：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="setName">修改姓名</button>
        <button @click="setAge">修改年龄</button>
    </div>
</template>
<script setup>
    import {reactive, toRef ,toRefs} from "vue";//创建reaction响应式的变量 引用数据类型 toRef 和 toRefs 用于解构对象
    const person = reactive({
        name:'zhangsan',
        age:18,
    })
    // const name = toRef(person,'name')//引用toRef
    let {name,age} = toRefs(person);//解构toRefs 引用对象
    function setAge(){age.value += 1;}
    function setName(){
        person.name  += '~';
        person.age += 1;
    }


</script>
<style scoped>  
/* scoped 在局部变量 不对外提供数据 */
</style>